<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <table>
              <tr>
                  <td v-show="!showlabel">&nbsp;<span style="font-size:16px;font-weight:800px;color:blue">阅读状态：</span></td>
                  <td v-show="!showlabel">
                      <el-radio v-model="msgstatus" label="1" @change="btnRefresh">未读</el-radio>
                      <el-radio v-model="msgstatus" label="2" @change="btnRefresh">已读</el-radio>
                      <el-radio v-model="msgstatus" label="3" @change="btnRefresh">全部</el-radio>
                  </td>
                  <td v-show="!showlabel">&nbsp;<span style="font-size:16px;font-weight:800px;color:blue">有效状态：</span></td>
                  <td v-show="!showlabel">
                      <el-radio v-model="expirestatus" label="1" @change="btnRefresh">有效消息</el-radio>
                      <el-radio v-model="expirestatus" label="2" @change="btnRefresh">过期消息</el-radio>
                      <el-radio v-model="expirestatus" label="3" @change="btnRefresh">全部</el-radio>
                  </td>
                  <td v-show="showlabel"><span style="font-size:16px;color:red">有您未查看的消息，请及时处理（单击行即可将消息变为已读，红色标记为必须确认的消息）！</span></td>
                  <td style="width:60px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                  <td>
                      <el-button icon="el-icon-search" @click.native="btnRefresh" v-show="!showlabel">查询</el-button>
                      <!-- <el-button icon="el-icon-circle-check" @click.native="btnread" v-show="msgstatus=='1'">已读</el-button> -->
                      <el-button icon="el-icon-chat-dot-round" @click.native="btnreply">回复</el-button>
                      <!-- <el-button icon="el-icon-success" @click.native="btnConfirm" :disabled="!(selrow.mustconfirm=='1'&&selrow.confirmflag!='1')">确认</el-button> -->
                      <!-- <el-button @click.native="btnClose">退出</el-button> -->
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <div style="height:100%">
                  <rm-layout-right splitcolor="white" movingcolor="#00ffff" :splitwidth=5 :fixsize=700>
                      <template v-slot:fix>
                          <div style="width:100%;height:100%;border:1px solid #CCC;overflow:auto">
                              <table style="width:100%">
                                  <tr>
                                      <td style="text-align:right;width:80px">接收者</td>
                                      <td>
                                          <el-input v-model="selrow.recievername" style="width:100%" :readonly="true"></el-input>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td style="text-align:right">主题</td>
                                      <td>
                                          <el-input v-model="selrow.msgtitle" style="width:100%" :readonly="true"></el-input>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td style="text-align:right">内容</td>
                                      <td>
                                          <div @click="msgcontentlinkClick">
                                              <quill-editor ref="myTextEditor" v-model="selrow.msgcontent" :options="editorOption" @focus="onEditorFocus($event)"></quill-editor>
                                          </div>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td style="text-align:right">消息类型</td>
                                      <td>
                                          <el-input v-model="selrow.msgtype" style="width:100%" :readonly="true"></el-input>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td style="text-align:right">发布者</td>
                                      <td>
                                          <el-input v-model="selrow.sendername" style="width:100px" :readonly="true"></el-input>
                                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                          <el-checkbox v-model="selrow.mustconfirm" disabled true-label="1" false-label="0">接收人必须确认</el-checkbox>
                                      </td>
                                  </tr>
                              </table>
                          </div>
                      </template>

                      <div style="height:100%;width:100%;background-color:#ddccbb;">
                          <vxe-table show-overflow ref="xTable" :data.sync="msgdata" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow resizable header-align="center" highlight-current-row highlight-hover-column highlight-hover-row :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" key="1" class="mytable-style" :loading="loading" @cell-click="TableChangeEvent" @cell-dblclick="celldblclk" :cell-class-name="cellClass">
                              <vxe-table-column field="status" title="状态" width="40" align="center">
                                  <template v-slot="{row}">
                                      <div v-if="row.mustconfirm=='1'">{{!!row.confirmtime?"已读":"未读"}}</div>
                                      <div v-else>{{!!row.rectime?"已读":"未读"}}</div>
                                  </template>
                              </vxe-table-column>
                              <vxe-table-column field="msgtime" title="发送时间" width="110" :formatter="['toDateString', 'yyyy-MM-dd HH:mm']" align="center"></vxe-table-column>
                              <vxe-table-column field="msgtitle" title="消息标题" width="150"></vxe-table-column>
                              <!-- <vxe-table-column field="msgcontent" title="消息内容" width="400"></vxe-table-column>-->
                              <vxe-table-column field="sendername" title="发送者" width="60" align="center"></vxe-table-column>
                              <vxe-table-column field="msgtype" title="消息类型" width="60" align="center"></vxe-table-column>
                              <vxe-table-column field="mustconfirm" title="必须确认" width="60" align="center">
                                  <template v-slot="{row}">
                                      <el-checkbox v-model="row.mustconfirm" true-label="1" false-label="0" disabled></el-checkbox>
                                  </template>
                              </vxe-table-column>
                              <vxe-table-column field="confirmflag" title="确认标志" width="60" align="center">
                                  <template v-slot="{row}">
                                      <el-checkbox v-model="row.confirmflag" true-label="1" false-label="0" disabled></el-checkbox>
                                  </template>
                              </vxe-table-column>
                              <vxe-table-column field="confirmusername" title="确认人" width="60" align="center"></vxe-table-column>
                              <vxe-table-column field="confirmtime" title="确认时间" width="110" align="center" :formatter="['toDateString', 'yyyy-MM-dd HH:mm']"></vxe-table-column>
                              <vxe-table-column field="rectime" title="接收时间" width="110" align="center" :formatter="['toDateString', 'yyyy-MM-dd HH:mm']"></vxe-table-column>
                              <vxe-table-column field="endtime" title="提醒截止时间" width="110" align="center" :formatter="['toDateString', 'yyyy-MM-dd HH:mm']"></vxe-table-column>
                              <vxe-table-column field="msgid" title="消息ID" width="60" align="center"></vxe-table-column>
                              <vxe-table-column field="msgrecid" title="接收ID" width="60" align="center"></vxe-table-column>
                              <vxe-table-column field="delflag" title="删除标志" width="60" align="center">
                                  <template v-slot="{row}">
                                      <el-checkbox v-model="row.delflag" true-label="1" false-label="0" disabled></el-checkbox>
                                  </template>
                              </vxe-table-column>
                              <template v-slot:fix>
                                  <div style="font-size:17px;padding-top:3px;background-color:#fff;text-align:center;font-weight:bold;color:blue">共 {{datacnt}} 条</div>
                              </template>
                          </vxe-table>
                      </div>
                  </rm-layout-right>

              </div>
          </div>
      </div>
      <!-- <span>hello world</span>
      <div>
          this is the news page.the transform param is
          </br>
          p1={{this.$route.query.p1}}
          </br>
          p2= {{this.$route.query.p2}}
          </br>
          p2= {{this.$route.query.p3}}
      </div> -->

      <el-dialog v-el-drag-dialog :title="msgtitle" :visible.sync="dialogmsginfo" width="70%" append-to-body>
          <div style="height:500px;text-indent: 2em;border:1px solid #ccc;padding:10px">{{msginfo}}</div>
      </el-dialog>
      <!--发送消息-->
      <el-dialog v-el-drag-dialog append-to-body :visible.sync="dialogSendMsgVisible" :show-close="true" title="消息发布" width="950px" @close="SendMsgClose">
          <div style="height:650px">
              <rm-sendmsginfo :key="dialogSendMsgkey" @closeSendMsg="dialogSendMsgVisible=false" :getDraft="false" :receiverObj="receiverObj"></rm-sendmsginfo>
          </div>
      </el-dialog>
      <!--消息确认-->
      <el-dialog v-el-drag-dialog append-to-body title="消息确认" :visible.sync="dialogmsgconfirm" width="30%" :lock-scroll="true">
          <!-- <p style="font-size:15px;color:#0099CC">{{selrow.msgtitle}}</p>
          <br> -->
          <p style="font-size:18px;color:red">是否确认该消息？</p>
          <br>
          <p style="font-size:12px；color:red">【若不确定，关闭弹窗后重新点击选中行，即可弹出消息确认框!】</p>
          <br>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="btnConfirm">确 认</el-button>
              <el-button @click="dialogmsgconfirm = false">取 消</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import RmSendmsginfo from "@/components/rmcompents/msgcenter/rm_sendmsginfo.vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  name: "msgcenter_page",
  components: {
      RmSendmsginfo,
      quillEditor,
  },
  props: { mustConfirmmsgData: { type: Array, default: () => [] } },
  data() {
      return {
          msgtype: this.$route.query,
          msgstatus: "3",
          expirestatus: "3",
          msgdata: [],
          loading: false,
          selrow: [],
          dialogmsginfo: false,
          msgtitle: "",
          msginfo: "",
          dialogSendMsgVisible: false,
          dialogSendMsgkey: 0,
          receiverObj: [{ userno: "" }, { username: "" }],
          showlabel: false,
          editorOption: {
              placeholder: "请输入文本",
              modules: {
                  toolbar: {
                      container: [],
                  },
              },
          },
          content: "",
          dialogmsgconfirm: false,
      };
  },
  watch: {},
  created() {
      // console.log(this.mustConfirmmsgData);
      if (this.mustConfirmmsgData.length > 0) {
          //必须确认的消息直接弹窗处理
          this.showlabel = true;
          this.msgdata = this.mustConfirmmsgData;
          setTimeout(() => {
              this.selrow = this.msgdata[0];
              this.$refs.xTable.setCurrentRow(this.msgdata[0]);
          }, 10);
          //重新初始化变量
          this.msgstatus = "1";
          this.msgtype = { p1: "16", p2: this.$pub.getmac(), p3: this.$tool.getSession(this.$tool.loginuserno) };
      } else {
          //其他消息可以走页面
          this.showlabel = false;
          this.initPage(); //初始化页面
      }
  },
  computed: {
      datacnt() {
          return this.msgdata.length;
      },
  },
  mounted() {},
  updated() {},
  methods: {
      SendMsgClose() {
          this.dialogmsgconfirm = false;
      },
      onEditorFocus(event) {
          event.enable(false);
      }, // 获得焦点事件
      //刷新消息
      btnRefresh() {
          this.initPage();
      },
      initPage() {
          this.loading = true;
          this.$tool
              .request({
                  url: "ucent/alertmsg",
                  method: "post",
                  data: {
                      params: this.msgtype,
                      msgstatus: this.msgstatus,
                      expirestatus: this.expirestatus,
                  },
              })
              .then((res) => {
                  this.msgdata = res.data;
                  if (this.msgdata.length > 0) {
                      this.selrow = this.msgdata[0];
                      this.$refs.xTable.setCurrentRow(this.msgdata[0]);
                      //this.msghandle();
                  } else {
                      this.$refs.xTable.setCurrentRow(null);
                      this.selrow = {};
                  }
                  this.loading = false;
              })
              .catch((e) => {
                  this.$alert(e, "提示");
                  this.loading = false;
              });
      },
      TableChangeEvent({ row, column }) {
          // console.log("TableChangeEvent", row);
          this.selrow = row;
          this.msghandle();
      },
      msghandle() {
          if (!this.selrow.rectime) {
              if (this.selrow.mustconfirm != "1") {
                  //非必须确认消息
                  if (!this.selrow.rectime) {
                      this.btnread();
                  }
              } else {
                  //必须确认消息
                  if (!this.selrow.confirmtime) {
                      this.dialogmsgconfirm = true;
                  }
              }
          } else {
              if (this.selrow.mustconfirm == "1" && this.selrow.confirmflag != "1") {
                  this.dialogmsgconfirm = true;
              }
          }
      },
      celldblclk({ row, column }) {
          // if (column.property == "msgcontent") {
          //     this.msgtitle = row.msgtitle;
          //     this.msginfo = row.msgcontent;
          //     this.dialogmsginfo = true;
          // }
          //this.msghandle();
      },
      //消息已读
      btnread() {
          this.msgreadorconfirm("read")
              .then((res) => {
                  if (res.errmsg == "") {
                      this.$pub.message(this, "消息已读！", "success", 3000);
                      this.selrow.rectime = this.$pub.InitDate();
                      //this.btnRefresh();
                  } else {
                      this.$alert(res.errmsg, "提示");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "提示");
              });
      },
      //回复
      btnreply() {
          if (this.$refs.xTable.tableData.length > 0) {
              let receiverno = XEUtils.clone(this.selrow.sender, true);
              let receivername = XEUtils.clone(this.selrow.sendername, true);
              let msgtitle = XEUtils.clone(this.selrow.msgtitle, true);
              this.receiverObj = { userno: receiverno, username: receivername, msgtitle: msgtitle };
              this.dialogSendMsgkey++;
              //点击回复，默认消息已读
              this.btnread();
              this.dialogSendMsgVisible = true;
          } else {
              this.$alert("没有获取到页面数据！", "提示");
          }
      },
      //消息确认
      btnConfirm() {
          if (!this.selrow.confirmtime) {
              this.msgreadorconfirm("confirm")
                  .then((res) => {
                      if (res.errmsg == "") {
                          this.$pub.message(this, "消息已读已确认！", "success", 3000);
                          this.dialogmsgconfirm = false;
                          this.selrow.confirmflag = "1";
                          this.selrow.confirmtime = this.$pub.InitDate();
                          //this.btnRefresh();
                      } else {
                          this.$alert(res.errmsg, "提示");
                      }
                  })
                  .catch((e) => {
                      this.$alert(e, "提示");
                  });
          }
      },
      msgreadorconfirm(type) {
          return this.$tool.request({
              url: "ucent/handlemsg",
              method: "post",
              data: {
                  action: "msgreadorconfirm",
                  type: type,
                  msgid: this.selrow.msgid,
                  msgrecid: this.selrow.msgrecid,
              },
          });
      },
      cellClass({ row, column }) {
          if (column.property == "msgcontent") {
              return "search-column";
          } else if (column.property == "msgtitle") {
              if (row.mustconfirm == "1") {
                  return "col-red";
              } else {
                  return "col-blue";
              }
          } else if (column.property == "status") {
              if (row.mustconfirm == "1") {
                  if (!!row.confirmtime) {
                      return "col-green"; //已读
                  } else {
                      return "col-yellow"; //未读
                  }
              } else {
                  if (!!row.rectime) {
                      return "col-green"; //已读
                  } else {
                      return "col-yellow"; //未读
                  }
              }
          }
      },
      //点击了链接时取消全屏模式，不然回不到页面
      msgcontentlinkClick() {
          let alink = this.$pub.checkLink(this.selrow.msgcontent);
          if (alink) {
              if (typeof jsObj != "undefined") {
                  this.$pub.SetWindowStyle(true, true, false);
              } else {
                  if (document.exitFullscreen) {
                      document.exitFullscreen();
                  } else if (document.webkitCancelFullScreen) {
                      document.webkitCancelFullScreen();
                  } else if (document.mozCancelFullScreen) {
                      document.mozCancelFullScreen();
                  } else if (document.msExitFullscreen) {
                      document.msExitFullscreen();
                  }
              }
          }
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}

table tr td {
  padding: 3px;
}

::v-deep  .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
::v-deep .search-column {
  cursor: pointer;
  text-decoration: underline;
}
::v-deep .mytable-style .vxe-body--column.col-red {
  background: #f3437d;
  color: whitesmoke;
}
::v-deep .mytable-style .vxe-body--column.col-blue {
  background: #0099ff;
  color: white;
}
::v-deep .mytable-style .vxe-body--column.col-yellow {
  background: #ffff00;
  color: #121111;
}
::v-deep .mytable-style .vxe-body--column.col-green {
  background: #009933;
  color: white;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #000000;
}
</style>

